<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>食物分类</title>
	<style>
		
	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="24">
				<el-button type="primary" @click="openFoodType(null)">添 加</el-button>
				<el-table :data="foodTypes" border highlight-current-row style="width: 100%">
					<!-- -->
					<el-table-column prop="typeTitle" label="名称"></el-table-column>
					<el-table-column prop="typeIcon" label="图标">
						<template slot-scope="scope">
							<img v-if="scope.row.typeIcon" :src="scope.row.typeIcon" class="avatar-sm">
						</template>
					</el-table-column>
					<!--<el-table-column prop="typeSore" label="排序"></el-table-column>-->
					<el-table-column prop="typeTime" label="时间"></el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
							<el-button @click="openFoodType(scope.row)" type="text" size="small">修 改</el-button>
							<el-popconfirm title="是否删除？" @confirm="delFoodType(scope.row.typeId)">
								<el-button slot="reference" type="text" size="small">删 除</el-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog :title="foodTypeForm.ttitle" :visible.sync="foodTypeForm.visible" width="30%">
			<el-form :model="foodTypeForm" :rules="foodTypeRules" ref="foodTypeForm" label-width="100px">
				<!-- -->
				<el-form-item label="名称" prop="typeTitle">
					<el-input v-model="foodTypeForm.typeTitle"></el-input>
				</el-form-item>
				<el-form-item label="图标" prop="typeIcon">
					<el-upload class="avatar-uploader" action="/file/upload" :show-file-list="false"
						:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="foodTypeForm.typeIcon" :src="foodTypeForm.typeIcon" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<!--<el-form-item label="排序" prop="typeSore">
					<el-input v-model="foodTypeForm.typeSore"></el-input>
				</el-form-item>
				<el-form-item label="时间" prop="typeTime">
					<el-input v-model="foodTypeForm.typeTime"></el-input>
				</el-form-item>-->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeFoodType">取 消</el-button>
				<el-button type="primary" @click="saveFoodType">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		foodTypes: [],
		selectFoodType: null,
		foodTypeForm: {
			visible: false,
			ttitle: '新增/修改',
			typeId: '',
			typeTitle: '',
			typeIcon: '',
			typeSore: '',
		},
		foodTypeQuery: {
			page: '',
			size: '',
		},
		foodTypeRules: {
			/**typeId: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],**/
			typeTitle: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			typeIcon: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			/**typeSore: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			typeTime: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],**/
		},
	}
	let vueMethods = {
		getFoodTypes() {
			let that = this
			postRequst('/getTypes', that.foodTypeQuery, true).then(function (resp) {
				that.foodTypes = resp.rows
				if (resp.rows && resp.rows.length > 0) {
					that.selectFoodType = resp.rows[0]
				}
			})
		},
		openFoodType(row) {
			let that = this
			if (row) {
				that.foodTypeForm.ttitle = '修改'
				that.foodTypeForm.typeId = row.typeId
				that.foodTypeForm.typeTitle = row.typeTitle
				that.foodTypeForm.typeIcon = row.typeIcon
				that.foodTypeForm.typeSore = row.typeSore
			} else {
				that.foodTypeForm.ttitle = '新增'
				that.foodTypeForm.typeId = ''
				that.foodTypeForm.typeTitle = ''
				that.foodTypeForm.typeIcon = ''
				that.foodTypeForm.typeSore = ''
			}
			that.foodTypeForm.visible = true
		},
		closeFoodType() {
			this.$refs["foodTypeForm"].resetFields();
			this.foodTypeForm.visible = false
		},
		saveFoodType() {
			let that = this
			this.$refs["foodTypeForm"].validate((valid) => {
				if (valid) {
					postRequst('/saveType', that.foodTypeForm).then(function (resp) {
						if (resp.status == 0) {
							that.getFoodTypes()
							that.foodTypeForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delFoodType(typeId) {
			let that = this
			postRequst('/delType', {typeId: typeId}, true).then(function (resp) {
				if (resp.status == 0) {
					that.getFoodTypes()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		handleAvatarSuccess(res, file) {
			let imageUrl = URL.createObjectURL(file.raw);
			this.foodTypeForm.typeIcon = res.data
			console.log(imageUrl)
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				//this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
				//this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			//return isJPG && isLt2M;
			return true
		}
	}
	function vueCreated() {
		let that = this
		that.getFoodTypes()
	}
</script>

</html>